<template>
  <div>
    <van-row @click="openModal">
            <van-col span="6">
                <img src="@/assets/log.png" alt="" />
            </van-col>
            <van-col span="15">{{nickname}}</van-col>
            <van-col span="3">
                <van-icon name="arrow" />
            </van-col>
        </van-row>
        <van-grid :column-num="3" square>
            <van-grid-item icon="label-o" text="我的订单" clickable="true" @click="gridItem"/>
            <van-grid-item icon="bill-o" text="优惠劵" clickable="true" @click="gridItem"/>
            <van-grid-item icon="goods-collect-o" text="礼品卡" clickable="true" @click="gridItem"/>
            <van-grid-item icon="contact" text="会员福利" clickable="true" @click="gridItem"/>
            <van-grid-item icon="star-o" text="我的收藏" clickable="true" @click="gridItem"/>
            <van-grid-item icon="location-o" text="地址管理" clickable="true" @click="gridItem"/>
            <van-grid-item icon="flag-o" text="我的足迹" clickable="true" @click="gridItem"/>
            <van-grid-item icon="warn-o" text="账号安全" clickable="true" @click="gridItem"/>
            <van-grid-item icon="service-o" text="联系客服" clickable="true" @click="gridItem"/>
            <van-grid-item icon="question-o" text="帮助中心" clickable="true" @click="gridItem"/>
            <van-grid-item icon="smile-comment-o" text="意见反馈" clickable="true" @click="gridItem"/>
            <van-grid-item icon="setting-o" text="设置" clickable="true" @click="gridItem"/>
            
        </van-grid>
        <transition name="van-fade">
          <van-overlay class="login-modal" :show="overlayShow" >
          <div class="close-modal" @click="overlayShow=false"></div>
          <van-form @submit="onSubmit" class="login-form">
            <van-field
              v-model="username"
              name="username"
              label="用户名"
              placeholder="请输入用户名"
              :rules="[{ required: true}]"
            />
            <van-field
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true}]"
            />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
          </van-form>
        </van-overlay>
        </transition>
      
  </div>
</template>

<script>
import {goLogin} from '@/request/api.js'
export default {
  data(){
    return{
      overlayShow:false,
      nickname:'用户登录',
      avatarSrc:require("../assets/logo.png"),
      username: '夏语冰',
      password: '123456',
    }
  },
  created(){
    let token = localStorage.getItem('token')
    if(token){
      // JSON.parse() 字符串转成对象
      let userInfo = JSON.parse(localStorage.getItem('userInfo'))
       // 把用户信息填写到页面上
      this.nickname = userInfo.username
      this.avatarSrc = userInfo.avatar
    }else{
      let values={username:'夏语冰',password:'123456'}
      this.onSubmit(values)
      setTimeout(()=>{
        this.$router.push('/home')
      },2000)
    }
  },
  methods:{
    openModal(){
      if(!localStorage.getItem('token')){
        this.overlayShow = true
      }
    },
    async onSubmit(values) {
      const res = await goLogin({username:values.username, pwd:values.password})

      if(res.errno==0){
        this.$toast.success('登录成功')
        // 把token保存到本地
        localStorage.setItem('token', res.data.token)
        // JSON.stringify() 对象转成字符串
        localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
        setTimeout(()=>{
          this.overlayShow = false
          // 把用户信息填写到页面上
          this.nickname = res.data.userInfo.username
          this.avatarSrc = res.data.userInfo.avatar
        },1000)
      }else{
        this.$toast(res.errmsg)
      }
    },
    gridItem(){
      this.$toast('该功能暂未开放！')
    }
  }
}
</script>

<style lang = "less" scoped>
.login-modal{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99; 
    .login-form{
        width: 90%;
        height: 200px;
        background-color: #fff;
        padding-bottom: .2rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .van-field, .van-button{
          margin-top: 0.2rem;
        }
    } 
    .close-modal{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
    } 
}
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.18rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
</style>
